<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />
  <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{ 'RISK_CTRL.SCHEME_NAME' | i18n }}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="schemeName" name="schemeName" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl; context: { control: validateForm.get('schemeName'), name: 'schemeName' }"
              >
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{ 'RISK_CTRL.SCHEME_DESC' | i18n }}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="schemeDesc" name="schemeDesc" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl; context: { control: validateForm.get('schemeDesc'), name: 'schemeDesc' }"
              >
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{ 'ROLE.OWNER_INSTITUTION' | i18n }}</nz-form-label>
          <nz-form-control>
            <app-aams-select
              nzHasFeedback="true"
              level="institution"
              [disabled]="type === operateType.edit || userType"
              formControlName="insCode"
            ></app-aams-select>
            <nz-form-explain *ngIf="validateForm.get('insCode').dirty && validateForm.get('insCode').errors">
              <ng-container
                >{{ 'VALIDATION.REQUIRED_SELECT' | i18nParams: { name: 'GENERAL.BIZ_LEVEL.INSTITUTION' } }}
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{ 'GENERAL.INFO.CURRENCY' | i18n }}</nz-form-label>
          <nz-form-control>
            <app-currency-select formControlName="currency" [multiple]="false" type="string"></app-currency-select>
            <nz-form-explain *ngIf="validateForm.get('currency').dirty && validateForm.get('currency').errors">
              <ng-container
                >{{ 'VALIDATION.REQUIRED_SELECT' | i18nParams: { name: 'GENERAL.INFO.TRANSACTION_CURRENCY' } }}
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>
<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength')">{{ errorTips[name]?.maxlength }}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>
